<template>
    <div>
        <div class="content">
            <div class="contentItem" v-for="(item, index) in playlist" :key="index">
                <div class="contentItemImg" @click.stop="routerPush(item.id)">
                    <img :src="item.coverImgUrl?item.item.coverImgUrl:item.picUrl" alt="">
                    <span>{{ changeCount(item.playCount) }}</span>
                    <svg @click.stop="PlaylistDetails(item.id)"  t="1687652083797" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4064" width="32" height="32"><path d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0z m0 981.333333C253.866667 981.333333 42.666667 770.133333 42.666667 512S253.866667 42.666667 512 42.666667s469.333333 211.2 469.333333 469.333333-211.2 469.333333-469.333333 469.333333z" fill="#dbdbdb" p-id="4065"></path><path d="M672 441.6l-170.666667-113.066667c-57.6-38.4-106.666667-12.8-106.666666 57.6v256c0 70.4 46.933333 96 106.666666 57.6l170.666667-113.066666c57.6-42.666667 57.6-106.666667 0-145.066667z" fill="#dbdbdb" p-id="4066"></path></svg>

                    </div>
                <div class="foot">
                    <p>{{ item.name }}</p>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
import { GetHotplaylist,GetTuijianMusicS,Getplaylist,Getplaylistssss } from "@/api/Playlist";
export default {
    data() {
        return {
            playlist: [{
                picUrl: ''
            }
            ]
        }
    },
    props:['cat'],
     watch: {
        cat: {
            deep: true,
            // immediate: true,
            handler(newVal, oldVal) {
                if (newVal==='为你推荐') {
                    
                    GetTuijianMusicS().then((res) =>{
                        this.playlist = res.data.recommend.splice(0, 10)
                    })
                } else {
                    GetHotplaylist('hot', this.cat, 10,0).then(res => {
                    this.playlist = res.data.playlists
                })
                }
                
            },
        },
     },
    created() {
        // GetHotplaylist('hot', this.cat, 10,0).then(res => {
        //     // console.log(res.data);
        //     this.playlist = res.data.playlists
        //     // console.log(res.data.result);
        // })
        GetTuijianMusicS().then((res) =>{
            this.playlist = res.data.recommend.splice(0, 10)
        })
    },
    methods: {
        changeCount(num) {
            if (num >= 100000000) {
                return (num / 100000000).toFixed(1) + '亿'
            } else if (num > 10000) {
                return (num / 10000).toFixed(1) + '万'
            }
        },
        PlaylistDetails(id) { 
            // 拿到总数据的id
            Getplaylist(id).then(res => { 
                // console.log(res.data.playlist.trackIds);
                console.log(res.data.playlist);
                // 将总数据的id分离出来
                const musicIdList = res.data.playlist.trackIds.map(
                    item => { 
                        return Number(item.id)
                    }
                )
                // 放入请求参数中
                return Getplaylistssss(musicIdList.join(','))
                // 请求结果
            }).then(res => {
                // console.log( res.data.songs);
                let songs = res.data.songs
                // console.log(songs, '@@@@@@');
                this.$store.commit("PlaylistDetails/setPlayList",songs);
                setTimeout(() => {
                    console.log(this.$store.state.PlaylistDetails.playList);
                }, 1000);
             })
            // console.log(id);
        },
        routerPush(id) { 
            this.$router.push({
                path: '/MusicSonsList',
                query: {
                    // url的参数, 类似get请求的传参
                    id:id
                },
            })
        }
    },
}
</script>

<style lang="less" scoped>
 .content {
        display: flex;
        flex-wrap: wrap;

        .contentItem {
            position: relative;
            box-sizing: border-box;
            
            width: 20%;
            padding: 10px 20px;
            // height: 200px;
            .contentItemImg {
                position: relative;
                width: 100%;
                height: 200px;
                overflow: hidden;
                img {
                    position: absolute;
                    width: 100%;
                    
                    height: 200px;
                    border-radius: 5px;
                    z-index: 0;
                }

                span {
                    position: absolute;
                    right: 5px;
                    z-index: 100;
                    color: rgb(189, 187, 187);
                }
                &:hover svg{
                    transform: translateY(-45px);
                }
                svg{
                    position: absolute;
                    transition:all 1s;
                    right: 5px;
                    bottom: -35px;
                    z-index: 100;
                    color: red;
                }
            }

        }

    }
</style>